<template>
	<div class='competition-edit popup'>
		<div class="content">
			<h2 class="center">比赛信息编辑</h2>
			<el-form
				ref="informForm"
				label-width="100px"
				:rules="rules"
				:model="competitionInfo"
			>
				<el-form-item
					label="比赛名称"
					prop="name"
				>
					<el-input
						type="text"
						placeholder="请输入比赛名称"
						v-model="competitionInfo.name"
					/>
				</el-form-item>
				<el-form-item
					label="比赛分类"
					prop="typeId"
				>
					<el-select
						v-model="competitionInfo.typeId"
						placeholder="选择比赛分类"
					>
						<el-option
							v-for="item in PROJECT_TYPE"
							:key="item.value"
							:label="item.label"
							:value="item.value"
						/>
					</el-select>
				</el-form-item>
				<el-form-item
					label="比赛级别"
					prop="level"
				>
					<el-select
						v-model="competitionInfo.level"
						placeholder="选择比赛级别"
					>
						<el-option
							v-for="item in COMPETITION_LEVELS"
							:key="item.value"
							:label="item.label"
							:value="item.value"
						/>
					</el-select>
				</el-form-item>
				<el-form-item
					label="比赛时间"
					prop="competitionDate"
				>
					<el-input
						type="text"
						placeholder="请输入比赛时间"
						v-model="competitionInfo.competitionDate"
					/>
				</el-form-item>
				<el-form-item
					label="比赛周期"
					prop="competitionCycle"
				>
					<el-input
						type="text"
						placeholder="请输入比赛周期"
						v-model="competitionInfo.competitionCycle"
					/>
				</el-form-item>
				<el-form-item
					label="介绍地址"
					prop="articleUrl"
				>
					<el-input
						type="text"
						placeholder="请输入比赛介绍地址"
						v-model="competitionInfo.articleUrl"
					/>
				</el-form-item>
				<el-form-item
					label="比赛介绍"
					prop="intro"
				>
					<el-input
						type="textarea"
						:autosize="{ minRows: 2, maxRows: 8 }"
						placeholder="请输入比赛介绍,从小程序中将编辑好的html复制过来"
						resize="none"
						v-model="competitionInfo.intro"
					/>
				</el-form-item>
				<el-form-item	label="比赛图片">
					<ChooseFile
						class="choose-file"
						@change="uploadFile"
					>
						<el-image
							v-if="competitionInfo.picUrl"
							style="width: 100px;"
							:src="competitionInfo.picUrl"
							:preview-src-list="[competitionInfo.picUrl]"
						/>
						<span>点击选择图片</span>
					</ChooseFile>
				</el-form-item>
			</el-form>
			<div class="btns">
				<el-button
					class="sure"
					type="primary"
					plain
					@click="onclickSure"
				>
					确认
				</el-button>
				<el-button
					class="cancel"
					type="info"
					@click="$emit('close')"
				>
					取消
				</el-button>
			</div>
		</div>
	</div>
</template>

<script>
import { getPublicUploadSign } from '@/api/system'
import { putComp } from '@/api/competition'
import { PROJECT_TYPE } from '@/constants/staticData'
import { cosUpload } from '@/utils/file'
export default {
  props: {
    competition: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      rules: {
        name: [{ required: true, message: '请输入比赛名称', trigger: 'blur' }],
        typeId: [{ required: true, message: '请选择比赛分类', trigger: 'blur' }],
        intro: [{ required: true, message: '请输入比赛介绍', trigger: 'blur' }]
      },
      PROJECT_TYPE,
      COMPETITION_LEVELS: [
        { label: '校级', value: 1 },
        { label: '市级', value: 2 },
        { label: '省级', value: 3 },
        { label: '非保研国级', value: 4 },
        { label: '保研国级', value: 5 },
      ],
      competitionInfo: {
        name: '', // 比赛名
        typeId: '', // 比赛类型id
        level: '', // 级别
        intro: '', // 简介
        picUrl: '', // 图片
        articleUrl: '', // 文章id
        competitionCycle: '', // 比赛周期
        competitionDate: '', // 比赛日期
      }
    }
  },
  created() {
    this.competitionInfo = {
      ...this.competition,
      typeId: this.competition.competitionType.id
    }
  },
  methods: {
    /**
     * 上传文件
     */
    async uploadFile(e) {
      this.$loading()
      try {
        const sign = (await getPublicUploadSign(`competition-avatar${ Date.now() }.jpg`)).data

        this.competitionInfo.picUrl = await cosUpload(e[ 0 ], sign)
      } catch (err) {
        console.log(err)
      }
      this.$hideLoading()
    },
    /**
     * 点击确认
     */
    onclickSure() {
      this.$refs.informForm.validate(valid => {
        if (valid) {
          this.$confirm('确认修改该比赛信息？', async() => {
            this.$loading()
            try {
              await putComp({
                id: this.competitionInfo.id,
                name: this.competitionInfo.name,
                level: this.competitionInfo.level,
                intro: this.competitionInfo.intro,
                articleUrl: this.competitionInfo.articleUrl,
                competitionDate: this.competitionInfo.competitionDate,
                competitionCycle: this.competitionInfo.competitionCycle,
                selectedSeasonHot: this.competitionInfo.selectedSeasonHot,
                typeId: this.competitionInfo.typeId
              })
              this.$success('修改比赛信息成功')
              this.$emit('finish')
            } catch (err) {
              console.log(err)
            }
            this.$hideLoading()
          })
        }
      })
    }
  }
}
</script>

<style lang='scss' scoped>
.competition-edit {
  .content {
    width: 60%;

    h2 {
      margin-bottom: 10px;
      color: $blue;
    }

    .el-form {
      height: 500px;
      padding: 0 10px;
      overflow: auto;
    }

    .choose-file {
      cursor: pointer;
    }

    .btns {
      margin-top: 20px;
    }
  }
}
</style>
